<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/account_list.css" rel="stylesheet" />
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
	</head>

	<body>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的卡片</h1>
		</header>
		<div class="mui-content">
			<div class="account_list">
				<div class="example" v-bind:id="x.account_id" v-for="x in account_list">
					<div class="name">{{x.account_name}}</div>
					<div class="num">{{x.account_num}}</div>
				</div>
			</div>
		</div>
		
		<script type="text/javascript">
			// vue
			mui.init()
			
			app = new Vue({
			     el:'.account_list',
			     data:{
			        account_list: '',
			     },
			});
			
			
			// 给记录加事件
			function getRadioRes(className){
				var rdsObj = document.getElementsByClassName(className);
				var checkVal = null;
				for(i=0; i<rdsObj.length;i++){
					rdsObj[i].addEventListener('tap',function(){
						var ids = this.id
						mui.openWindow({
							url:'one_account.html',
							id:'one_account.html',
							extras:{
								ids:ids,
							},
						});
					});
				}
			};
			
			mui.plusReady(function () {
				// 从子页面返回刷新-
				window.addEventListener('customEvent', function(event) {
				    // mui.fire()传过来的额外的参数，在event.detail中；
				    var detail = event.detail;
				    // var param = detail.param;
				    // 执行相应的ajax或者操作DOM等操作
					show_my_account_li()
				});
				// 重构back函数
				var old_back = mui.back;
				mui.back = function() {
				    // 获取目标口窗口对象
				    var target = plus.webview.getWebviewById('setting.html');
				    // var target = plus.webview.getWebviewById("my/my.html");
				    // 执行相应的事件
				    mui.fire(target, 'customEvent', {});
				    // 执行关闭
				    old_back();
				};
				
				function show_my_account_li(){
					mui.ajax(localStorage.getItem('request_url')+ "cost/user/show_my_account/?token="+localStorage.getItem('uid'), {
					    data:"token=" + localStorage.getItem('uid'),
					    dataType:'json',  
					    type:'POST',  
					    contentType:"application/x-www-form-urlencoded; charset=utf-8",  
					    timeout:2000,  
					    success:function show(e){
							// mui.alert(typeof e.data)
							app.account_list = e.data
							if(e.data.length ==0){
								mui.toast('😐小主这里空空如也哦~')
							};
							var account_list = []
							var account_id = {}
							for(i=0;i<e.data.length;i++){
								// mui.alert(1)
								var dict = {'title': e.data[i].account_name + '          ' + e.data[i].account_num}
								account_list.push(dict);
								account_id[e.data[i].account_num] = e.data[i].account_id;
							}
							// mui.alert(JSON.stringify(account_id));
							localStorage.setItem('account_list',JSON.stringify(account_list));
							localStorage.setItem('account_id',JSON.stringify(account_id));
							// 每个模块不一样的颜色
							setTimeout(function(){
								var account_lists = document.getElementsByClassName('example')
								for(var i=0; i< account_lists.length; i++){
									account_lists[i].style.backgroundColor = ram_color()
								}
							},100);
							// 延迟加事件
							setTimeout(function(){
								getRadioRes('example');
								mui.toast('😃同步完成...');
							},500)
						},  
					    error:function(xhr,type,errorThrown){
							mui.toast('同步失败...退出此页面重试');
					    }  
					});
				};
				
				show_my_account_li()
				// mui.alert(localStorage.getItem('request_url')+ "user/show_my_account/?token="+localStorage.getItem('uid'))
			    
			});
			function ram_color(){
				var r = Math.floor(Math.random()*(200+1-100)+100);
				var g = Math.floor(Math.random()*(200+1-100)+100);
				var b = Math.floor(Math.random()*(200+1-100)+100);
				return 'rgb(' + r + ',' + g + ',' + b + ')'
			};
			
		</script>
		
	</body>

</html>
